<!DOCTYPE html>
<html>
<head>
    <title>$app.topic banner管理</title>
    #parse("/inc/meta.htm")
</head>
<body id="inner_page_start">
<div class="modal fade" id="ex-back-big" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form action="/system/bannerInfo" type="post">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h4" id="myExtraLargeModalLabel">banner信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">

                    <input type="hidden" name="id" id="menu-id">
                    <div class="form-group row">
                        <div class="col-sm-2"></div>
                        <label for="menu-img" class="col-form-label col-sm-2">图片</label>
                        <div class="col-sm-6">
                            <div id="img-div"></div>
                            <label for="input_file">
                                <div  class="btn btn-primary">上传图片</div>
                                <input
                                        type="file"
                                        name="file"
                                        id="input_file"
                                        accept="image/*"
                                        onchange="imgPreview(this)"
                                        style="display: none;"
                                />
                                <div id="up-error"></div>
                            </label>
                            <input type="hidden" class="form-control" id="menu-img" name="img" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <img id="img-show" src="" style="width: 100%;height: 400px;margin: auto;" />
                    </div>
                    <div class="form-group  row">
                        <div class="col-sm-2"></div>
                        <label for="menu-type" class="col-form-label col-sm-2">类型</label>
                        <div class="col-sm-6"><input type="text" class="form-control" id="menu-type" name="type"/></div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-2"></div>
                        <label for="menu-url" class="col-form-label col-sm-2">URL</label>
                        <div class="col-sm-6"><input type="text" class="form-control" id="menu-url" name="url"/></div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-2"></div>
                        <label for="menu-des" class="col-form-label col-sm-2">描述</label><div class="col-sm-6">
                        <input type="text" class="form-control" id="menu-des" name="des"/></div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-2"></div>
                        <label for="menu-state" class="col-form-label col-sm-2">状态</label><div class="col-sm-6">
                        <select type="text" class="form-control" id="menu-state" name="state">
                            <option value="1">禁用</option>
                            <option value="0">启用</option>
                        </select></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="sub-button-banner">新建</button>
                </div>
            </div>
        </form>
    </div>
</div>
#parse("/inc/header.htm")
<div id="wrapper">
    #parse("/inc/menu.htm")
    <div id="content-wrapper">
        <div class="container-fluid">
            <!-- 面包屑-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    系统设置
                </li>
                <li class="breadcrumb-item active">banner</li>
            </ol>
        </div>
        <!-- /.container-fluid class="card mb-3"-->
        <div class="container-fluid">
            <div class="card-body">
                <form id="list_form" action="/system/banners" >

                    <div class="form-inline">
                        <div class="form-group mx-sm-3">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ex-back-big" >
                                新建 banner</button>
                        </div>
                    </div>
                    <br/>

                    <div class="row">
                        <div class="col-sm-12 table-outer-box">
                            <table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
                                <thead>
                                <tr role="row">
                                    <th>图像</th>
                                    <th>类型</th>
                                    <th>附加URL</th>
                                    <th>描述</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <!--  style="background:url($!app.staticUrl$!row.img)"  -->
                                #foreach( $row in $respData )
                                <tr #if($change == $!row.id) style="background: #0bb20c" #end>
                                    <td>
                                        <!--<a href="$!app.staticUrl$!row.img" target="_blank" >点击打开</a>-->
                                        <img src="$!app.staticUrl$!row.img" style="max-width: 200px;" />
                                    </td>
                                    <td>
                                        #if($!row.type == 0 )
                                        外部链接
                                        #elseif($!row.type == 1 )
                                        内部链接
                                        #else
                                        未知
                                        #end
                                        </td>
                                    <td>
                                        #if($!row.type == 0 )
                                        <a href="$!row.url" target="_blank" >$!row.url</a>
                                        #else
                                        $!row.url
                                        #end
                                    </td>
                                    <td>$!row.des</td>
                                    <td>
                                        #if($!row.state == 0)
                                            启用
                                        #else
                                            禁用
                                        #end
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#ex-back-big"
                                                data-mid="$!row.id">编辑</button>
                                    </td>
                                </tr>
                                #end
                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        #parse("/inc/copyright.htm")
    </div>
    <!-- /.content-wrapper -->
</div>
#parse("/inc/footer.htm")
<script>
    var host = "$!app.staticUrl"

    $('#ex-back-big').on('show.bs.modal', function (event) {
        $("#up-error").text("");
        var button = $(event.relatedTarget)
        var mid = button.data('mid')
        if(mid){
            $("#menu-id").val(mid)
            $("#sub-button-banner").text("更新")
            role(mid)
        }else{
            $("#img-show").attr("src","")
            $("#menu-img").val("")
            $("#menu-type").val("")
            $("#menu-url").val("")
            $("#menu-des").val("")
            $("#menu-state").val("1")
            $("#menu-id").val("")
            $("#sub-button-banner").text("新建")
        }
    })

    function role(mid){
        if(!mid)
            mid = ""
        var good = false
        $.ajax({
            url: "/system/banner",
            data: { id:mid },
            type: "POST",
            dataType: "json",
            async: false,
            success: function(data) {
                if(data.state == "000"){
                    good = true
                    data.data
                    if(data.data.img) {
                        $("#menu-img").val(data.data.img)
                    }
                    $("#menu-type").val(data.data.type)
                    if(data.data.url)
                        $("#menu-url").val(data.data.url)
                    $("#menu-state").val(data.data.state)
                    if(data.data.des)
                        $("#menu-des").val(data.data.des)
                    $("#img-show").attr("src",host+data.data.img)
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("网络异常，请稍后重试"+textStatus)
                setTimeout(function(){
                    $("#ex-back-big").modal("hide")
                },500);
            }
        });

        return good
    }

    function imgPreview(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        if(!file){
            alert("请重新选择图片！");
            return ;
        }
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }

        $("#up-error").text("正在上传......");

        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("img-show");
            //图片路径设置为读取的图片
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);

        var formData = new FormData();
        formData.append("file", $("#input_file")[0].files[0]); //添加图片信息的参数
        formData.append("op", "file"); //添加其他参数
        formData.append("folder", "banner");
        $.ajax({
            url: "/img/in",
            type: "POST",
            cache: false, //上传文件不需要缓存
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function(data) {
                //var rs = data;
                if (data.state == "000") {
                    $("#up-error").text("上传成功！图片可用");
                    $("#img-show").attr("src",host+ data.data);
                    $("#menu-img").val(data.data)
                } else {
                    tipTopShow(data.data);
                }
            },
            error: function(data) {
                tipTopShow("上传失败,请稍后重试。");
            }
        });
    }

    function tipTopShow(ms) {
        $("#up-error").text(ms);
        $("#img-show").removeAttr("src");
    }
</script>
</body>
</html>
